<template>
  <div class="equipment-container">
    <!-- 页面头部 -->
    <!-- <div class="page-header">
      <div class="header-title">
        <i class="el-icon-s-management"></i>
        <span>设备接收管理系统</span>
      </div>
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增接收</el-button>
    </div>-->
    <div class="out full_h">
      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="search-group">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索接收编号、设备名称..."
            prefix-icon="el-icon-search"
            class="search-input"
            clearable
          ></el-input>
          <el-select v-model="filterStatus" placeholder="状态筛选" clearable>
            <el-option label="完成接收" value="completed"></el-option>
            <el-option label="待接收" value="pending"></el-option>
            <el-option label="接收中" value="processing"></el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >搜索</el-button
          >
        </div>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
          >新增接收</el-button
        >
      </div>

      <!-- 表格区域 -->
      <div
        style="height: calc(100% - 82px); box-sizing: border-box"
        class="table-container"
      >
        <div class="table-header">
          <div class="table-title">
            <i class="el-icon-document"></i>
            <span>接收记录列表</span>
          </div>
          <div class="table-actions">
            <el-button icon="el-icon-download" @click="handleExport"
              >导出数据</el-button
            >
            <el-button icon="el-icon-refresh" @click="handleRefresh"
              >刷新</el-button
            >
          </div>
        </div>
        <!-- <div
          class
          style="overflow-y:auto;height: calc(100% - 82px);box-sizing: border-box;padding: 15px;
}"
        >
          bis quam ab culpa ipsam explicabo rerum minus praesentium, voluptates sed voluptatibus possimus eligendi dolores distinctio a. Amet recusandae nostrum cum sint commodi at.
          Suscipit, accusamus? Voluptate provident porro, earum eos autem deserunt soluta iure ab rem corrupti aspernatur optio magni dignissimos assumenda quias officiis deserunt esse saepe in impedit quam hic. Sed?
          lorem*100
        </div>-->
        <div
          class="table-area"
          style="overflow-y:hidden;height: calc(100% - 82px - 75px);box-sizing: border-box;padding: 15px;
}"
        >
          <el-table
            :data="[...tableData, ...tableData, ...tableData, ...tableData]"
            stripe
            style="width: 100%"
            height="100%"
          >
            <el-table-column
              prop="receiveNo"
              align="center"
              label="接收编号"
            ></el-table-column>
            <el-table-column
              prop="deviceName"
              align="center"
              label="设备标识"
            ></el-table-column>
            <el-table-column
              prop="totalCount"
              width="100px"
              label="合计数量"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="acceptanceDate"
              label="验收日期"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <div class="pagination-info">
            共 {{ total }} 条记录，{{ Math.ceil(total / pageSize) }} 页
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div v-if="showDeviceSelection" class="modal-overlay">
      <DeviceSelection
        ref="deviceSelector"
        :title="'选择设备'"
        :devices="deviceList"
        :categories="categoryList"
        :initial-mode="selectionMode"
        :initial-selected="preSelectedDevices"
        :confirm-button-text="'确认选择'"
        @confirm="handleDeviceConfirm"
        @cancel="showDeviceSelection = false"
        @selection-change="handleSelectionChange"
        @mode-change="handleModeChange"
        @category-change="handleCategoryChange"
      />
    </div>

    <!-- 新增 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="编辑设备信息"
      :visible.sync="isEditDialog"
      width="70%"
      :before-close="handleEditClose"
    >
      <div class="edit-main flex col">
        <div class="edit-main-head flex col">
          <div class="edit-tit flex fl-up-down-ct">
            <span class="padd-lt">基本信息</span>
          </div>

          <div class="out-basic-info padd-up-down-15">
            <div class="basic-info padd-15 bg">
              <el-row>
                <el-form
                  :model="baseForm"
                  status-icon
                  ref="ruleForm"
                  label-width="150px"
                  class="demo-ruleForm"
                >
                  <el-col :span="8">
                    <el-form-item label="接收单号">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value1"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="设备标识">
                      <el-input
                        @focus="openDeviceSelect"
                        type="text"
                        v-model="baseForm.value2"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="使用单位">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="计划项目号">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="单设备购置价格">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单设备其他使用费用">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单设备原值">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="合计数量">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="安装说明">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="结算日期">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="验收日期">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="说明事项">
                      <el-input
                        :disabled="true"
                        type="text"
                        v-model="baseForm.value3"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </div>

          <div class="edit-tit flex fl-up-down-ct">
            <span class="padd-lt">设备列表信息</span>
            <button type="button" class="maint-btn" @click="addDeviceBox">
              + 新增设备信息
            </button>
          </div>
          <div class="table-container padd-up-down-15 f1">
            <div class="device-list">
              <div v-if="devices.length === 0" class="empty-state">
                <i>📋</i>
                <h3>暂无设备信息</h3>
                <p>请点击上方的新增设备按钮添加设备信息</p>
              </div>

              <div
                v-else
                v-for="(device, index) in devices"
                :key="device.id"
                class="card bg"
              >
                <div class="card-header">
                  <div class="card-title">设备 {{ index + 1 }}</div>
                  <div class="btn-group">
                    <button
                      class="action-btn delete-btn"
                      @click="removeDevice(index)"
                    >
                      删除
                    </button>
                  </div>
                </div>
                <el-row>
                  <el-form
                    :model="baseForm"
                    status-icon
                    ref="ruleForm"
                    label-width="150px"
                    class="demo-ruleForm"
                  >
                    <el-col :span="8">
                      <el-form-item label="集团设备卡编号">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value1"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="固定资产编号">
                        <el-input
                          @focus="openDeviceSelect"
                          type="text"
                          v-model="baseForm.value2"
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="固定资产卡片号">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="生产厂家">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="厂家编号">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="在用地点">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="随机配件">
                        <el-button size="mini" @click="showPartsDialog = true"
                          >编辑</el-button
                        >
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="启用日期">
                        <el-input
                          :disabled="true"
                          type="text"
                          v-model="baseForm.value3"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="随机材料">111</el-form-item>
                    </el-col>
                  </el-form>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div style="box-size: border-box" class="modal-footer flex">
          <el-button size="mini" @click="handleEditClose">取消</el-button>
          <el-button
            color="#1a4b8c"
            size="mini"
            @click="handleEditSave"
            type="primary"
            >保存</el-button
          >
          <el-button color="#1a4b8c" size="mini" type="primary">接收</el-button>
          <el-button color="#1a4b8c" size="mini" type="primary"
            >上传单据</el-button
          >
          <el-button color="#1a4b8c" size="mini" type="primary"
            >下载单据</el-button
          >
          <el-button color="#1a4b8c" size="mini" type="primary"
            >完成验收</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 随机配件对话框组件 -->
    <RandomPartsSelection
      :visible.sync="showPartsDialog"
      :initial-data="currentParts"
      @submit="handlePartsSubmit"
      @close="handlePartsClose"
    />
  </div>
</template>

<script>
import DeviceSelection from "../components/devicepts.vue";
import RandomPartsSelection from "../components/randpartsPts.vue";
export default {
  name: "EquipmentManagement",
  components: { DeviceSelection, RandomPartsSelection },
  data() {
    return {
      showPartsDialog: false,
      currentParts: [
        {
          name: "电池",
          model: "5号电池",
          enableDate: "2023-12-07",
          quantity: 10,
          remarks: "高性能碱性电池",
        },
        {
          name: "保护码",
          model: "标准型",
          enableDate: "2023-11-15",
          quantity: 5,
          remarks: "设备安全保护",
        },
      ],
      deviceIdCounter: 0,
      devices: [],
      // todo 新增
      statusMapp: {
        1: "运行中",
        2: "维修中",
        3: "待机中",
        4: "关机中",
      },
      isEditDialog: false,
      baseForm: {
        value1: "",
        value2: "",
        value3: "",
      },
      realData: {
        baseForm: {
          value1: "11",
          value2: "22",
          value3: "33",
        },
        sonTableData: [
          {
            id: 1,
            data1: "s",
            datalist: "112",
            data3: "113",
            data4: "2023-11-10 00:00:00",
            data5: "2",
            data6: "1",
          },
          {
            id: 2,
            data1: "111",
            datalist: "111",
            data3: "111",
            data4: "2023-10-26 00:00:00",
            data5: "111",
            data6: "1",
          },
          {
            id: 3,
            data1: "11124",
            data2: "1231",
            data3: "124",
            data4: "2023-10-27 00:00:00",
            data5: "152",
            data6: "2",
          },
          {
            id: 4,
            data1: "111",
            datalist: "111",
            data3: "111",
            data4: "2023-10-26 00:00:00",
            data5: "111",
            data6: "1",
          },
          {
            id: 5,
            data1: "11124",
            data2: "1231",
            data3: "124",
            data4: "2023-10-27 00:00:00",
            data5: "152",
            data6: "2",
          },
        ],
        maintTableData: [
          {
            data1: "清洗",
            data2: "11",
            data3: "1",
            data4: "",
          },
          {
            data1: "清洗",
            data2: "11",
            data3: "",
            data4: "",
          },
        ],
      },

      // todo
      showDeviceSelection: false,
      selectionMode: "multiple",
      preSelectedDevices: ["EQ-2023-001"],
      selectedDevices: [],
      deviceList: [
        {
          id: "EQ-2023-001",
          name: "高精度示波器",
          category: "演示用设备",
          spec: "带宽: 1GHz, 采样率: 5GS/s, 通道: 4",
          status: "available",
        },
        {
          id: "EQ-2023-002",
          name: "工业机器人",
          category: "生产设备",
          spec: "负载: 20kg, 重复定位精度: ±0.05mm",
          status: "inuse",
          disabled: true,
        },
        {
          id: "EQ-2023-003",
          name: "服务器集群",
          category: "x86服务器",
          spec: "CPU: 2×Xeon Gold, 内存: 256GB, 存储: 4TB SSD",
          status: "available",
        },
        {
          id: "EQ-2023-004",
          name: "恒温恒湿试验箱",
          category: "仪器及试验设备",
          spec: "温度范围: -40℃~150℃, 湿度范围: 20%~98%",
          status: "maintenance",
        },
        {
          id: "EQ-2023-005",
          name: "电动叉车",
          category: "运输工具",
          spec: "载重: 2.5吨, 起升高度: 3.5米, 电池: 48V/600Ah",
          status: "available",
        },
      ],
      categoryList: [
        { id: "all", name: "全部设备", icon: "fas fa-th-list" },
        { id: "demo", name: "演示用设备", icon: "fas fa-tv" },
        { id: "production", name: "生产设备", icon: "fas fa-industry" },
        { id: "electronic", name: "电子设备", icon: "fas fa-laptop" },
        { id: "server", name: "x86服务器", icon: "fas fa-server" },
        { id: "server1", name: "x86服务器1", icon: "fas fa-server" },
        { id: "server2", name: "x86服务器2", icon: "fas fa-server" },
        { id: "server3", name: "x86服务器3", icon: "fas fa-server" },
        { id: "server4", name: "x86服务器4", icon: "fas fa-server" },
        { id: "server5", name: "x86服务器5", icon: "fas fa-server" },
        { id: "server6", name: "x86服务器6", icon: "fas fa-server" },
        { id: "server7", name: "x86服务器7", icon: "fas fa-server" },
        { id: "server8", name: "x86服务器8", icon: "fas fa-server" },
        { id: "server9", name: "x86服务器9", icon: "fas fa-server" },
        { id: "server10", name: "x86服务器10", icon: "fas fa-server" },
        { id: "server11", name: "x86服务器11", icon: "fas fa-server" },
        { id: "server12", name: "x86服务器12", icon: "fas fa-server" },
        { id: "server13", name: "x86服务器13", icon: "fas fa-server" },
        { id: "server14", name: "x86服务器14", icon: "fas fa-server" },
        { id: "server15", name: "x86服务器15", icon: "fas fa-server" },
        { id: "server16", name: "x86服务器16", icon: "fas fa-server" },
      ],
      searchKeyword: "",
      filterStatus: "",
      dateRange: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 479,
      tableData: [
        {
          receiveNo: "JS20180522005",
          deviceName: "佳兆多功能数码综合机-2204AD",
          totalCount: 1,
          acceptanceDate: "2018-05-22 00:00:00",
          status: "完成验收",
        },
        {
          receiveNo: "JS201405310010",
          deviceName: "排龙池",
          totalCount: 301,
          acceptanceDate: "2014-05-31 00:00:00",
          status: "完成验收",
        },
        {
          receiveNo: "JS201405310011",
          deviceName: "广区型电",
          totalCount: 1,
          acceptanceDate: "2014-05-31 00:00:00",
          status: "完成验收",
        },
        {
          receiveNo: "JS201405310012",
          deviceName: "3#4#清水池",
          totalCount: 2805,
          acceptanceDate: "2014-05-31 00:00:00",
          status: "完成验收",
        },
        {
          receiveNo: "JS200904300005",
          deviceName: "铝合金板棒-6米",
          totalCount: 1,
          acceptanceDate: "2009-04-30 00:00:00",
          status: "完成验收",
        },
      ],
    };
  },
  methods: {
    removeDevice(e) {
      this.devices.splice(e, 1);
    },
    // 处理配件提交
    handlePartsSubmit(partsData) {
      console.log("提交的配件数据:", partsData);
      this.currentParts = partsData;
      this.$message.success("配件设置成功");
    },

    // 处理对话框关闭
    handlePartsClose() {
      console.log("配件对话框已关闭");
    },
    addDeviceBox() {
      this.devices.push({
        id: ++this.deviceIdCounter,
        deviceCardNo: "",
        manufacturer: "",
        assemblyDate: "",
        randomPart1: "",
        randomPart2: "",
        fixedAssetNo: "",
        manufacturerNo: "",
        assetCardNo: "",
        location: "",
      });
    },

    handleEditSave() {
      console.log("submit");
    },
    openDeviceSelect() {
      console.log("1111");
      this.showDeviceSelection = true;
    },
    // todo 新增
    handleEditClose() {
      console.log("关闭编辑窗口");
      this.isEditDialog = false;
    },
    // todo 新增
    handleDeviceConfirm(result) {
      console.log("设备选择确认:", result);
      this.selectedDevices = result.devices;

      this.showDeviceSelection = false;

      // 可以在这里调用API保存选择结果
    },

    handleSelectionChange(deviceIds) {
      console.log("选择变化:", deviceIds);
    },

    handleModeChange(mode) {
      console.log("模式变化:", mode);
      this.selectionMode = mode;
    },

    handleCategoryChange(categoryId) {
      console.log("分类变化:", categoryId);
    },

    // 通过ref调用子组件方法
    clearSelection() {
      this.$refs.deviceSelector.clearSelection();
    },

    setSelection(deviceIds) {
      this.$refs.deviceSelector.setSelection(deviceIds);
    },
    handleSearch() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.success("搜索完成");
      }, 500);
    },
    handleAdd() {
      // this.$message.success("点击新增接收");
      // this.showDeviceSelection = true;
      this.isEditDialog = true;
    },
    handleClose(e) {
      this.isDialog1 = false;
    },
    handleView(row) {
      this.$message.info(`查看 ${row.receiveNo}`);
    },
    handleEdit(row) {
      this.$message.info(`编辑 ${row.receiveNo}`);
    },
    handleExport() {
      this.$message.success("导出数据成功");
    },
    handleRefresh() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$message.success("数据已刷新");
      }, 800);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },
    loadData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style scoped lang="scss">
.equipment-container {
  height: 100%;
  width: 100%;
  padding: 15px;
  // width: 100%;
  box-sizing: border-box;
}

/* 头部区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 24px;
  // padding: 0 8px;
}

.header-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2d3d;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-title i {
  color: #409eff;
  font-size: 28px;
}

/* 搜索和操作区域 */
.toolbar {
  background: white;
  padding: 20px;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  // margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-group {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 300px;
}

.search-input {
  flex: 1;
  max-width: 400px;
}

.filter-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 表格容器 */
.table-container {
  background: white;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: auto;
  min-height: 0;
}

.table-header {
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2d3d;
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 自定义表格样式 */
.custom-table {
  border: none;
}

.custom-table .el-table__header {
  // background: #f8f9fa;
}

.custom-table .el-table__header th {
  // background: #f8f9fa;
  color: #606266;
  font-weight: 600;
  border-bottom: 2px solid #eaeaea;
}

.custom-table .el-table__body tr:hover td {
  background: #f5f7fa !important;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-completed {
  background: #f0f9ff;
  color: #1890ff;
  border: 1px solid #d1e9ff;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.view-btn,
.edit-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.view-btn {
  background: #f0f9ff;
  color: #1890ff;
  border: 1px solid #d1e9ff;
}

.view-btn:hover {
  background: #1890ff;
  color: white;
}

.edit-btn {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.edit-btn:hover {
  background: #52c41a;
  color: white;
}

/* 分页区域 */
.pagination-container {
  padding: 20px 24px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafbfc;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .equipment-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-group {
    min-width: auto;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
// 新增
.edit-main {
  padding: 15px 15px 20px;
  box-sizing: border-box;
  max-height: calc(80vh - 35px);
  // border: 1px solid red;
  .edit-tit {
    border-left: 4px solid #1a4b8c;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .basic-info {
    border: 1px solid #ebeef5;
  }
  .edit-main-head {
    // max-height: calc(80vh - 60px);
    // overflow-y:auto
    min-height: 0;
  }
}
.abmain-maint-tle {
  overflow-y: auto;
  box-sizing: border-box;
}
.bg {
  // background-color: #f8f9fa;
}
.modal-footer {
  padding: 15px 20px;
  // height: 60px;
  // background-color: #f8f9fa;
  justify-content: flex-end;
  // gap: 10px;
  border-top: 1px solid #eaeaea;
  margin: 0 -15px;
  box-sizing: border-box;
}

// 设备列表
.device-list {
  min-height: 200px;
}
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #bdc3c7;
}
.card {
  // background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 15px;
  // margin-bottom: 10px;
  box-sizing: border-box;
  // border-left: 4px solid #3498db;
  animation: fadeIn 0.5s ease;
  min-height: 352px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.card-title {
  font-size: 16px;
  color: #2c3e50;
  font-weight: 300;
}
.btn-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover {
  background-color: #c0392b;
}
.edit-tit {
  border-left: 4px solid #1a4b8c;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.maint-btn {
  background: none;
  border: 1px dashed #1a4b8c;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}
</style>